<template>
	<view :data-theme="theme" class="user_payment">
		<form @submit="submitSub" report-submit="true">
			<view class="payment-top acea-row row-column row-center-wrapper">
				<span class="name1">我的余额</span>
				<view class="pic">
					￥
					<span class="pic-font">{{ nowMoney || 0 }}</span>
				</view>
			</view>
			<view class="payment">
				<view class="tip picList">
					<view
						class="pic-box pic-box-color acea-row row-center-wrapper row-column"
						:class="activePic === index ? 'pic-box-color-active' : ''"
						v-for="(item, index) in packageList"
						:key="index"
						@click="picCharge(index, item)"
					>
						<view class="pic-number-pic">
							{{ item.price }}
							<span class="pic-number">元</span>
						</view>
						<view class="pic-number">赠送：{{ item.giveMoney }} 元</view>
					</view>
					<view
						class="pic-box pic-box-color acea-row row-center-wrapper"
						:class="parseFloat(activePic) === parseFloat(packageList.length) ? 'pic-box-color-active' : ''"
						@click="picCharge(packageList.length)"
					>
						<input
							type="digit"
							placeholder="其他"
							v-model="money"
							@input="onInput($event)"
							maxlength="5"
							class="pic-box-money pic-number-pic uni-input"
							:placeholder-class="parseFloat(activePic) === parseFloat(packageList.length) ? 'placeColor' : ''"
							:class="parseFloat(activePic) === parseFloat(packageList.length) ? 'pic-box-color-active' : ''"
							@blur="addMoney()"
						/>
					</view>
					<view class="tips-box">
						<view class="tips mt-30">注意事项：</view>
						<view class="tips-samll" v-for="item in noticeList" :key="item">
							{{ item }}
						</view>
					</view>
				</view>
				<!-- #ifndef  MP-->
				<view class="wrapper borRadius14 px-30" v-if="!active">
					<view class="item">
						<view>支付方式</view>
						<view class="list">
							<view
								class="payItem acea-row row-middle"
								:class="curActive == index ? 'on' : ''"
								@tap="payItem(index)"
								v-for="(item, index) in cartArr"
								:key="index"
								v-if="item.payStatus == 1"
							>
								<view class="name acea-row row-center-wrapper">
									<view class="iconfont animated" :class="item.icon + ' ' + (animated == true && active == index ? 'bounceIn' : '')"></view>
									{{ item.name }}
								</view>
								<view class="tip">{{ item.title }}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- #endif -->
				<button class="but" formType="submit">{{ active ? '立即转入' : '立即充值' }}</button>
				<view class="alipaysubmit" v-html="formContent"></view>
			</view>
		</form>
	</view>
</template>

<script>
import { rechargeRoutine, rechargeWechat, getRechargeApi, transferIn, appWechat, alipayFull, rechargeCreateApi } from '@/api/user.js';
import { wechatQueryPayResult } from '@/api/order.js';
import { toLogin } from '@/libs/login.js';
import { mapGetters } from 'vuex';
import { Debounce } from '@/utils/validate.js';
let app = getApp();
export default {
	data() {
		let that = this;
		return {
			navRecharge: ['账户充值', '佣金转入'],
			active: 0,
			toPrice: '',
			placeholder: '0.00',
			payChannel: '',
			packageList: [],
			activePic: 0,
			money: '',
			numberPic: '',
			rechar_id: 0,
			noticeList: [],
			theme: app.globalData.theme,
			cartArr: [],
			payType: '', //支付方式
			openType: 1, //优惠券打开方式 1=使用
			curActive: 0, //支付方式切换
			animated: false,
			formContent: '',
			nowMoney: 0
		};
	},
	computed: mapGetters(['isLogin', 'systemPlatform', 'userInfo']),
	watch: {
		isLogin: {
			handler: function (newV, oldV) {
				if (newV) {
					this.getRecharge();
				}
			},
			deep: true
		}
	},
	onLoad() {
		if (this.isLogin) {
			this.getRecharge();
			this.payConfig();
		} else {
			toLogin();
		}
	},
	methods: {
		// 支付配置
		payConfig() {
			// 支付方式
			this.$store.dispatch('getPayConfig').then((res) => {
				this.nowMoney = res.userBalance;
				let cartArrs = res.payConfig.filter((e) => e.value !== 'yue');
				this.cartArr = cartArrs;
				if (this.cartArr.length) {
					this.payType = this.cartArr[0].value;
				}
			});
		},
		onInput(e) {
			let val = e.target.value.replace(/(^\s*)|(\s*$)/g, '');
			if (!val) {
				this.val = '';
				return;
			}
			var reg = /[^\d.]/g;
			// 只能是数字和小数点，不能是其他输入
			val = val.replace(reg, '');
			// // 保证第一位只能是数字，不能是点
			val = val.replace(/^\./g, '');
			// // 小数只能出现1位
			val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
			// // 小数点后面保留2位
			val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
			this.$nextTick(() => {
				this.money = val;
			});
		},

		getAll() {
			this.toPrice = this.userInfo.brokeragePrice;
		},
		/**
		 * 选择金额
		 */
		picCharge(idx, item) {
			this.activePic = idx;
			if (!item) {
				this.rechar_id = null;
				this.numberPic = '';
			} else {
				this.money = null;
				this.rechar_id = item.id;
				this.numberPic = null;
			}
		},

		/**
		 * 充值额度选择
		 */
		getRecharge() {
			getRechargeApi()
				.then((res) => {
					this.packageList = res.data.packageList;
					if (this.packageList[0]) {
						this.rechar_id = this.packageList[0].id;
						this.numberPic = this.packageList[0].price;
					}
					this.noticeList = res.data.noticeList || [];
				})
				.catch((res) => {
					this.$dialog.toast({
						mes: res
					});
				});
		},
		navRecharges: function (index) {
			this.active = index;
		},
		payItem: function (e) {
			let that = this;
			let active = e;
			that.curActive = active;
			that.animated = true;
			that.payType = that.cartArr[active].value;
		},
		/*
		 * 用户充值
		 */
		submitSub: Debounce(function (e) {
			let that = this;
			let value = e.detail.value.number ? e.detail.value.number : that.numberPic;
			// 转入余额
			if (that.active) {
				if (parseFloat(value) < 0 || parseFloat(value) == NaN || value == undefined || value == '') {
					return that.$util.Tips({
						title: '请输入金额'
					});
				}
				uni.showModal({
					title: '转入余额',
					content: '转入余额后无法再次转出，确认是否转入余额',
					success(res) {
						if (res.confirm) {
							transferIn({
								price: parseFloat(value)
							})
								.then((res) => {
									that.$store.commit('changInfo', {
										amount1: 'brokeragePrice',
										amount2: that.$util.$h.Sub(that.userInfo.brokeragePrice, parseFloat(value))
									});
									return that.$util.Tips(
										{
											title: '转入成功',
											icon: 'success'
										},
										{
											tab: 5,
											url: '/pages/users/user_money/index'
										}
									);
								})
								.catch((err) => {
									return that.$util.Tips({
										title: err
									});
								});
						} else if (res.cancel) {
							return that.$util.Tips({
								title: '已取消'
							});
						}
					}
				});
			} else {
				if (!this.payType)
					return this.$util.Tips({
						title: '请选择支付方式'
					});
				uni.showLoading({
					title: '正在支付'
				});
				let money = parseFloat(that.money);
				if (that.rechar_id == 0) {
					if (Number.isNaN(money)) {
						return that.$util.Tips({
							title: '充值金额必须为数字'
						});
					}
					if (money <= 0) {
						return that.$util.Tips({
							title: '充值金额不能为0'
						});
					}
					if (money > 50000) {
						return that.$util.Tips({
							title: '充值金额最大值为50000'
						});
					}
				} else {
					money = that.money;
				}
				if (that.payType == 'alipay') {
					// #ifdef H5
					that.payChannel = 'alipay';
					// #endif
					// #ifdef APP-PLUS
					that.payChannel = 'alipayApp';
					// #endif
				} else {
					// #ifdef H5
					that.payChannel = that.$wechat.isWeixin() ? 'public' : 'h5';
					// #endif
					// #ifdef MP
					that.payChannel = 'mini';
					// #endif
					// #ifdef APP-PLUS
					that.payChannel = that.systemPlatform === 'ios' ? 'wechatIos' : 'wechatAndroid';
					// #endif
				}
				rechargeCreateApi({
					payChannel: that.payChannel,
					price: money,
					payType: that.payType,
					groupDataId: that.rechar_id
				})
					.then((res) => {
						uni.hideLoading();
						that.pay(res);
					})
					.catch((err) => {
						uni.hideLoading();
						return that.$util.Tips({
							title: err
						});
					});
			}
		}),
		pay(res) {
			let that = this;
			switch (that.payType) {
				case 'weixin':
					// #ifdef APP-PLUS
					let jsConfig = res.data.jsConfig;
					uni.requestPayment({
						provider: 'wxpay',
						orderInfo: {
							appid: jsConfig.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
							noncestr: jsConfig.nonceStr, // 随机字符串
							package: 'Sign=WXPay', // 固定值
							partnerid: jsConfig.partnerid, // 微信支付商户号
							prepayid: jsConfig.packages, // 统一下单订单号
							timestamp: Number(jsConfig.timeStamp), // 时间戳（单位：秒）
							sign: that.systemPlatform === 'ios' ? 'MD5' : jsConfig.paySign // 签名，这里用的 MD5 签名
						}, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
						success: function (res) {
							return that.$util.Tips(
								{
									title: '支付成功',
									icon: 'success'
								},
								{
									tab: 5,
									url: '/pages/users/user_money/index'
								}
							);
						},
						fail: function (err) {
							return that.$util.Tips({
								title: '支付失败'
							});
						},
						complete: function (res) {
							if (res.errMsg == 'requestPayment:cancel')
								return that.$util.Tips({
									title: '取消支付'
								});
						}
					});
					// #endif

					// #ifdef MP
					let jsConfig = res.data.jsConfig;
					uni.requestPayment({
						timeStamp: jsConfig.timeStamp,
						nonceStr: jsConfig.nonceStr,
						package: jsConfig.packages,
						signType: jsConfig.signType,
						paySign: jsConfig.paySign,
						success: function (res) {
							return that.$util.Tips(
								{
									title: '支付成功',
									icon: 'success'
								},
								{
									tab: 5,
									url: '/pages/users/user_money/index'
								}
							);
						},
						fail: function (err) {
							return that.$util.Tips({
								title: '支付失败'
							});
						},
						complete: function (res) {
							if (res.errMsg == 'requestPayment:cancel')
								return that.$util.Tips({
									title: '取消支付'
								});
						}
					});
					// #endif
					// #ifdef H5
					let jsConfig = res.data.jsConfig;
					let orderNo = res.data.orderNo;
					let data = {
						timestamp: jsConfig.timeStamp,
						nonceStr: jsConfig.nonceStr,
						package: jsConfig.packages,
						signType: jsConfig.signType,
						paySign: jsConfig.paySign
					};
					if (that.payChannel == 'h5') {
						uni.hideLoading();
						// that.$util.Tips({
						// 	title: '支付成功'
						// }, {
						// 	tab: 5,
						// 	url: '/pages/users/user_money/index'
						// });
						setTimeout(() => {
							location.href = jsConfig.mwebUrl;
						}, 100);
					} else {
						that.$wechat
							.pay(data)
							.finally(() => {
								return that.$util.Tips(
									{
										title: '支付成功',
										icon: 'success'
									},
									{
										tab: 5,
										url: '/pages/users/user_money/index'
									}
								);
							})
							.catch(function (err) {
								return that.$util.Tips({
									title: '支付失败'
								});
							});
					}
					// #endif
					break;
				case 'alipay':
					// alipayFull
					// #ifdef APP-PLUS
					let alipayRequest = res.data.alipayRequest;
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: alipayRequest,
						success: (e) => {
							return that.$util.Tips(
								{
									title: '支付成功',
									icon: 'success'
								},
								{
									tab: 5,
									url: '/pages/users/user_money/index'
								}
							);
						},
						fail: (e) => {
							return that.$util.Tips({
								title: '支付失败'
							});
						},
						complete: () => {
							uni.hideLoading();
						}
					});
					// #endif
					// #ifdef H5
					that.formContent = res.data.alipayRequest;
					that.$nextTick(() => {
						document.forms['punchout_form'].submit();
					});
					// #endif
					break;
			}
		},
		addMoney() {
			//this.money = this.money.replace(/[^\d]/g, '').replace(/^0{1,}/g, '');
		}
	}
};
</script>

<style lang="scss">
.placeColor {
	color: #fff;
}
.user_payment {
	height: 100vh;
	background-color: #fff;
}

.payment {
	position: relative;
	top: -60rpx;
	width: 100%;
	background-color: #fff;
	border-radius: 10rpx;
	padding-top: 25rpx;
	border-top-right-radius: 14rpx;
	border-top-left-radius: 14rpx;
}

.payment .nav {
	height: 75rpx;
	line-height: 75rpx;
	padding: 0 100rpx;
}

.payment .nav .item {
	font-size: 30rpx;
	color: #333;
}

.payment .nav .item.on {
	font-weight: bold;
	@include tab_border_bottom(theme);
}

.payment .input {
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px dashed #dddddd;
	margin: 60rpx auto 0 auto;
	padding-bottom: 20rpx;
	font-size: 56rpx;
	color: #333333;
	flex-wrap: nowrap;
}

.payment .input text {
	padding-left: 106rpx;
}

.payment .input input {
	padding-right: 106rpx;
	width: 310rpx;
	height: 94rpx;
	text-align: center;
	font-size: 70rpx;
}

.payment .placeholder {
	color: #fff;
	height: 100%;
	line-height: 94rpx;
}

.payment .tip {
	font-size: 26rpx;
	color: #888888;
	padding: 0 30rpx;
	// margin-top: 25rpx;
}

.payment .but {
	color: #fff;
	font-size: 30rpx;
	width: 700rpx;
	height: 86rpx;
	border-radius: 43rpx;
	margin: 50rpx auto 0 auto;
	@include linear-gradient(theme);
	line-height: 86rpx;
}

.payment-top {
	width: 100%;
	height: 278rpx;
	@include main_bg_color(theme);

	.name1 {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
		margin-top: -38rpx;
		margin-bottom: 30rpx;
	}

	.pic {
		font-size: 32rpx;
		color: #fff;
	}

	.pic-font {
		font-size: 78rpx;
		color: #fff;
	}
}

.picList {
	display: flex;
	flex-wrap: wrap;
	margin: 30rpx 0;

	.pic-box {
		width: 32%;
		height: auto;
		border-radius: 20rpx;
		margin-top: 21rpx;
		padding: 20rpx 0;
		margin-right: 12rpx;

		&:nth-child(3n) {
			margin-right: 0;
		}
	}

	.pic-box-color {
		background-color: #f4f4f4;
		color: #656565;
	}

	.pic-number {
		font-size: 22rpx;
	}

	.pic-number-pic {
		font-size: 38rpx;
		margin-right: 10rpx;
		text-align: center;
	}
}

.pic-box-color-active {
	@include linear-gradient(theme);
	color: #fff !important;
}

.tips-box {
	.tips {
		font-size: 28rpx;
		color: #333333;
		font-weight: 800;
		margin-bottom: 14rpx;
		margin-top: 20rpx;
	}

	.tips-samll {
		font-size: 24rpx;
		color: #333333;
		margin-bottom: 14rpx;
	}

	.tip-box {
		margin-top: 30rpx;
	}
}

.tips-title {
	margin-top: 20rpx;
	font-size: 24rpx;
	color: #333;
}

.wrapper .item textarea {
	background-color: #f9f9f9;
	width: auto !important;
	height: 140rpx;
	border-radius: 14rpx;
	margin-top: 30rpx;
	padding: 15rpx;
	box-sizing: border-box;
	font-weight: 400;
}

.px-30 {
	padding-left: 30rpx;
	padding-rigt: 30rpx;
}

.wrapper .item .placeholder {
	color: #ccc;
}

.wrapper .item .list {
	margin-top: 35rpx;
}

.wrapper .item .list .payItem {
	border: 1px solid #eee;
	border-radius: 14rpx;
	height: 86rpx;
	width: 95%;
	box-sizing: border-box;
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #282828;
}

.wrapper .item .list .payItem.on {
	// border-color: #fc5445;
	@include coupons_border_color(theme);
	color: $theme-color;
}

.name {
	width: 50%;
	text-align: center;
	border-right: 1px solid #eee;
}

.name .iconfont {
	width: 44rpx;
	height: 44rpx;
	border-radius: 50%;
	text-align: center;
	line-height: 44rpx;
	background-color: #fe960f;
	color: #fff;
	font-size: 30rpx;
	margin-right: 15rpx;
}

.name .iconfont.icon-weixin2 {
	background-color: #41b035;
}

.name .iconfont.icon-zhifubao {
	background-color: #00aaea;
}

.payItem .tip {
	width: 49%;
	text-align: center;
	font-size: 26rpx;
	color: #aaa;
}
</style>
